<template>
  <view class="home-page">
    <view class="header">
      <inputItem @click="search()" v-model="searchContent" showText="搜索热门壁纸" iconType="search"></inputItem>
      <image @click="switchTab(showType)" style="width: 6.4vw; height: 6.4vw; margin-top: 2.5vw; margin-right: 1.5vw" :src="`../../static/icons/${showType}.svg`"></image>
    </view>
    <view class="main">
      <up-waterfall v-model="articleList">
        <template v-slot:left="{ leftList }">
          <articleItem v-for="(item, index) in articleList[0]" :item="item" :key="index"></articleItem>
        </template>
        <template v-slot:right="{ rightList }">
          <articleItem v-for="(item, index) in articleList[1]" :item="item" :key="index"></articleItem>
        </template>
      </up-waterfall>
    </view>
  </view>
</template>

<script setup>
import inputItem from './components/inputItem.vue';
import articleItem from './components/articleItem.vue';
import { ref, reactive, computed, onBeforeMount } from 'vue';
import { usearticleListStore } from '@/stores/articeList';
import { storeToRefs } from 'pinia';

const searchContent = ref(null);

// const roundRobinSplit = (arr) => [arr.filter((_, i) => i % 2 === 0), arr.filter((_, i) => i % 2 !== 0)];

const store = usearticleListStore();
const { imgList } = storeToRefs(store);
const { roundRobinSplit, parseFilename } = store;
const articleList = reactive(roundRobinSplit(imgList.value.map(parseFilename)));

let showType = ref('phone');
function switchTab(e) {
  showType.value = showType.value == 'phone' ? 'computer' : 'phone';
}

function search() {
  uni.navigateTo({
    url: '/subpkg_home/search/index'
  });
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
